<template>
  <a-drawer
    wrapClassName="drawer"
    :title="title"
    width="40%"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleSubmit"
    @close="
      () => {
        this.visible = false
      }
    "
  >
    <a-spin :spinning="loading">
      <a-form-model ref="form1" :model="row" v-bind="layout">
        <a-form-model-item label="客户名称" prop="CustomerId">
          <a-select
            show-search
            disabled
            v-model="row.CustomerId"
            :default-active-first-option="false"
            :show-arrow="false"
            :filter-option="false"
          >
            <a-select-option v-for="d in searchdata" :key="d.Id" :value="d.Id">
              {{ d.cCusName + '(' + d.cCusCode + ')' }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="工单标题" prop="SWOTitle">
          <a-input v-model="row.SWOTitle" disabled autocomplete="off" placeholder="服务工单标题"/>
        </a-form-model-item>
        <a-form-model-item label="开始日期" prop="StartTime">
          <a-input v-model="row.StartTime" disabled autocomplete="off" placeholder="开始日期"/>
        </a-form-model-item>
        <a-form-model-item label="截止日期" prop="StartTime">
          <a-input v-model="row.EndTimeRqstd" disabled autocomplete="off" placeholder="截止日期"/>
        </a-form-model-item>
        <a-form-model-item label="内容" prop="SWOContent">
          <a-textarea v-model="row.SWOContent" disabled autocomplete="off" placeholder="服务工单内容"/>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
    <a-tabs default-active-key="1">
      <a-tab-pane key="1" tab="回复记录">
        <div class="container">
          <a-list :data-source="comments" item-layout="horizontal">
            <a-list-item slot="renderItem" slot-scope="item">
              <a-comment :author="item.ExecutorName" :datetime="item.CreateTime">
                <a-avatar slot="avatar" style="backgroundColor:#1890FF" icon="user"/>
                <div slot="content">
                  <p><span style="font-size: 12px;">费用金额：</span><span v-format="'#,##0.00'">{{ item.ExpenseInfo }}</span></p>
                  <p><span style="font-size: 12px;">回复内容：</span><span>{{ item.FeedbackInfo }}</span></p>
                </div>
              </a-comment>
            </a-list-item>
          </a-list>
        </div>
      </a-tab-pane>
    </a-tabs>
    <div style="height: 50px"></div>
    <div
      :style="{
        position: 'absolute',
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e8e8e8',
        padding: '10px 16px',
        textAlign: 'right',
        left: 0,
        background: '#fff',
        borderRadius: '0 0 4px 4px',
      }"
    >
      <a-button style="margin-right: 8px" @click="visible = false"> 取消</a-button>
    </div>
  </a-drawer>
</template>

<script>
import OperatorCache from '@/utils/cache/OperatorCache'

export default {
  props: {
    parentObj: Object,
  },
  data () {
    return {
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 20 },
      },
      visible: false,
      loading: false,
      obj: {},
      row: {},
      entity: {},
      rules: {
        FeedbackInfo: [{ required: true, message: '请填写返馈信息', trigger: 'blur' }],
        ExpenseInfo: [{ required: true, message: '请填写费用金额', trigger: 'blur' }],
      },
      title: '',
      searchdata: [],
      comments: [
        {
          author: '用户',
          avatar: '头像',
          content: '往期回复内容',
          datetime: '日期'
        },
      ],
    }
  },
  methods: {
    init () {
      this.visible = true
      this.comments = []
      this.entity = {}
      this.obj = {}
      this.searchdata = []
    },
    openForm (record, title) {
      this.init()
      this.title = title
      if (record) {
        this.loading = true
        this.$http.post('/SWOManagement/ServiceWorkOrderMain/GetTheDataForDetail', { id: record.Id }).then((resJson) => {
          this.loading = false
          if (resJson.Success && resJson.Data) {
            this.row = resJson.Data
            this.getTheData(this.row.CustomerId)
            if (this.row.SWODList && this.row.SWODList.length > 0) {
              this.row.SWODList.forEach((item) => (item.CreateTime = item.CreateTime.substring(0, 19)))
              this.comments = this.row.SWODList
            }
          } else {
            this.$message.error(resJson.Msg)
            this.visible = false
          }
        })
      }
    },
    op () {
      return OperatorCache.info
    },
    handleSubmit () {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }
        if (this.entity.ExpenseInfo) {
          if (this.entity.ExpenseInfo.length > 18) return this.$message.error('费用金额最多保留18位数')
          const ix = this.entity.ExpenseInfo.indexOf('.')
          if (ix !== -1 && this.entity.ExpenseInfo.length - ix > 5) {
            return this.$message.error('费用金额最多保留4位小数')
          }
        }
        this.loading = true
        this.entity.SWOMId = this.row.Id
        this.entity.ExecutorId = this.op().Id
        this.entity.ExecutorName = this.op().RealName
        this.$http.post('/SWOManagement/ServiceWorkOrderDetail/SaveData', this.entity).then((resJson) => {
          this.loading = false
          if (resJson.Success) {
            this.$message.success('操作成功!')
            this.visible = false
            this.parentObj.getDataList2()
          } else {
            this.$message.error(resJson.Msg)
          }
        })
      })
    },
    getTheData (id) {
      this.$http.post('/CustomerManagement/CustomerInfo/GetTheData', { id }).then(res => {
        if (res.Success) {
          if (res.Data) {
            this.searchdata = [res.Data]
          } else {
            this.searchdata = []
          }
        } else {
          this.$message.error(res.Msg)
        }
      })
    }
  }
}
</script>
<style scoped>
.container {
  max-height: 53vh;
  overflow-y: scroll;
  margin-bottom: 12px;
}

.container::-webkit-scrollbar {
  height: 5px;
  width: 5px;
}

.container::-webkit-scrollbar-thumb {
  /* 滚动条里面小方块 */
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #acacac;
}

.container::-webkit-scrollbar-track {
  /* 滚动条里面轨道 */
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #ededed;
}
</style>